<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { ColorRed } from '@/api/config'
import { HeaderData, Operation as Oper } from '@/components/dTable/dTable'
import { FormRules } from 'element-plus'
import { SearchFromJustify, SearchButton } from '@/components/dTable/dHeader'

import operation from '@/components/dTable/components/operation.vue'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import httpService, { LeftTableDataType, MidTableDataType } from '@/api/physicalExaminationManager/physicalPackage'

let curRow:LeftTableDataType

const emits = defineEmits(['removeInspect'])

const formData = reactive({
  searchData: ''
})

const rules = reactive<FormRules>({
  searchData: [
    { required: false, message: '长度不超过50个字符', max: 50, trigger: ['change', 'blur'] }
  ]
})

//**** 表格相关设置 ****/
const isResetPageNo = true

let originTableData:Array<MidTableDataType>

// 编辑套餐
const leftRowOperButtons:Array<Oper> = [{code:'remove', label:'移除', iconConfig:{icon:'common-removeItem', type:'custom', color:ColorRed, size:20}}]

// 左侧套餐表格数据
const midTableData = ref<Array<MidTableDataType>>([])

// 左侧表格选中行
const seleteItem = ref<MidTableDataType>()

// 左侧表格加载状态
const showMidLoading = ref(false)

// 已选项目组合表格表头
const midTableHeader = ref<Array<HeaderData>>([
  {prop:'itemGroupCode', label:'项目组合编码', columnType:'text',  'min-width':'120' },
  {prop:'itemGroupName', label:'项目组合名称', columnType:'text', 'min-width':'120'},
  {prop:'oper', label:'操作', columnType:'slot',  'width':'65', fixed:'right'}
])

//左边搜索
const leftSearchButtons = ref<Array<SearchButton>>([
  {type:'inputsearch', value:'', width:280, placeholder:'搜索体检项目编码或名称'}
])

// 本地关键词搜索
const searchMidTable = () => {
  const item = leftSearchButtons.value[0]
  let keyword = ''
  if (item && item.type === 'inputsearch') {
    keyword = item.value ? item.value.trim() : ''
  }

  if (!keyword) {
    midTableData.value = originTableData
  } else {
    midTableData.value = originTableData.filter((item) => {
      return item.itemGroupCode.toLowerCase().indexOf(keyword.toLowerCase()) > -1 ||
       item.itemGroupName.toLowerCase().indexOf(keyword.toLowerCase()) > -1
    })
  }
}

// 表格数据赋值
const setTableData = (data:Array<MidTableDataType>) => {
  data.forEach((item) => {
    for (const key in item) {
      if (item[key] === null) {
        item[key] = ''
      }
    }
    item.oper = JSON.parse(JSON.stringify(leftRowOperButtons))
  })
  midTableData.value = data
  if (isResetPageNo) {
    seleteItem.value = midTableData.value[0]
  }
  searchMidTable()
}


// 获取已选项目组合表格搜索数据
const getMidTableData = (row?:LeftTableDataType) => {
  if (row) {
    curRow = row
  } else {
    return
  }
  if (!curRow || !curRow.id) {
    setTableData([])
    return
  }
  httpService.getMidTableData(curRow.id).then((res) => {
    showMidLoading.value = false

    const {data} = res.data

    originTableData = data

    setTableData(data)

  }).catch(() => {
    showMidLoading.value = false
  })
}

// 表格行操作
const midCellOperation = (name:string, row:MidTableDataType) => {
  if (name === 'remove') {
    // console.log('row', row)
    showMidLoading.value = true
    emits('removeInspect', row.id)
  }
}



// 清空input搜索
const clearSearch = () => {
  formData.searchData = ''
  searchMidTable()
}

const setFormSearchClear = () => {
  formData.searchData = ''
}
const setMidTableDataNone = () => {
  // curRow.id = ''
  originTableData = []
  midTableData.value = []
}


//搜索事件
const onSubmit = (keyword) => {
  // console.log(keyword, 'keyword')
  getMidTableData(curRow)
}

// 暴露获取中间表格数据
defineExpose({getMidTableData, setFormSearchClear, setMidTableDataNone})



</script>

<template>
  <div class="title">
    已选项目组合
  </div>
  <!-- <el-form
    ref="formRef"
    :rules="rules"
    :model="formData"
    @submit.prevent
  >
    <el-form-item prop="searchData" class="inspection-package-mid-table-input">
      <el-input
        v-model="formData.searchData"
        placeholder="项目组合编码或名称"
        style="width: 100%; min-width: 40px;"
        :clearable="true"
        @keyup.enter="searchMidTable"
        @clear="clearSearch"
      />
    </el-form-item>
  </el-form> -->


  <div class="table-content">
    <d-table-promote
      :show-index="false"
      :label-width="100"
      :show-footer="false"
      :table-data="midTableData"
      :table-header-data="midTableHeader"
      :show-loading="showMidLoading"
      :default-seleted="seleteItem"
      :search-buttons="leftSearchButtons"
      @form-submit="onSubmit"
    >
      <template #searchbutton-prepend>
        <div class="search-label">
          项目组合
        </div>
      </template>
      <template #oper="scope">
        <operation class="cell-oper" :row="scope.row" :col="scope.item" @opertion-click="midCellOperation" />
      </template>
    </d-table-promote>
  </div>
</template>

<style scoped lang="less">
.title{
  font-weight: 700;
  font-size: 15px;
  height: 40px;
  line-height: 32px;
}
.table-content {
  height: calc(100% - 84px);
  :deep(.d-table-from-con){
    margin-bottom: 16px;
    // width: 100%;
  }
  .cell-oper {
    display: flex;
    justify-content: center;
  }
  :deep(.search-label){
    line-height: 32px;
    margin-right:10px;
    flex-shrink: 0;
  }
  :deep(.d-table-from-con){
    width:100%;
    &>div{
      width:100%;
    }
  }
  :deep(.d-header-form){
    flex:1;
    max-width: 280px!important;
  }

}

</style>
